<template>
	<n-modal v-bind="$attrs" preset="card" :style="bodyStyle" to="body" class="modal-container">
		<template #header>
			<slot name="title" />
		</template>
		<div :class="!isScroll?'scroll-content':'content'">
			<slot name="content" />
		</div>
		<template #action>
			<slot name="footer" />
		</template>
	</n-modal>
</template>

<script setup lang="ts">
	import {defineProps,reactive} from 'vue'
	type dialogProps = {
		top: Number, // 据顶部的距离
		width: Number, // 宽度
		isScroll: Boolean, // 是否允许滚动
		left: String,
		scrollHeight: String,
	}
	const props = withDefaults(defineProps<dialogProps>(),{
		top: 0,
		width: '800px',
		isScroll: false,
		scrollHeight: '500px'
	})
	const bodyStyle = reactive({
		width: props.width,
		padding: '0',
		position:'fixed',
		top: '5vh',
		left: `calc(50% - ${props.width.match(/\d+/)[0] / 2}px)`
	})
		
	
</script>
<style lang="scss">
	.modal-container{
		.n-card-header{
			.n-card-header__main{
				color: white;
			}
			.n-base-icon{
				color: #fff;
			}
			padding: 10px;
			background: #878787;
		}
		.n-card__content{
			padding: 0px;
		}
		.n-card__action{
			padding: 10px;
			background: #fff;
			border-top: 1px solid #eded;
		}
		.scroll-content{
			padding: 10px;
			max-height: 500px;
			overflow-y: auto;
		}
		.content{
			padding: 10px;
		}
	}
</style>
